<template>
	<!-- <view class="page htmlCanvas" :style="themeColor" id="htmlCanvas" :prop="is_navite" :change:prop="canvas.toImage"> -->
	<view class="page htmlCanvas" :style="themeColor" id="htmlCanvas">
		<view class="flex benben-position-layout flex flex-wrap align-center InviteFriends_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub InviteFriends_fd0_0'>
				<view class='flex flex-wrap align-center InviteFriends_fd0_0_c0'>
					<text class='fu-iconfont2  InviteFriends_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1" v-if="is_navite">&#xE794;</text>
					<text v-else></text>
				</view>
				<view class='flex flex-wrap align-center'>
				</view>
				<view class='flex flex-wrap align-center justify-end InviteFriends_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#4177DD"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<!---flex布局flex布局开始-->
		<view class="flex benben-flex-layout flex-wrap align-center InviteFriends_flex_1" v-else>
			<view class='flex flex-wrap align-center flex-sub InviteFriends_fd1_0'>
				<view class='flex flex-direction flex-wrap align-center flex-sub InviteFriends_fd1_0_c0'>
					<image class='InviteFriends_fd1_0_c0_c0' mode="aspectFill" :src='firends.head_img'></image>
					<text class='InviteFriends_fd1_0_c0_c1'>{{firends.user_nickname}}</text>
					<view class='flex flex-wrap align-center'>
						<text class='InviteFriends_fd1_0_c0_c2_c0'>邀请码：</text>
						<text class='InviteFriends_fd1_0_c0_c2_c1'>{{firends.invite_code}}</text>
					</view>
					<image class='InviteFriends_fd1_0_c0_c3' mode="aspectFill" :src='firends.qrcode_url'></image>
					<!-- <button class='InviteFriends_fd1_0_c0_c4' @tap.stop="getShare">一键分享</button>
					<button class='InviteFriends_fd1_0_c0_c5' @tap.stop="savePicture">保存图片到相册</button> -->

					<button class='InviteFriends_fd1_0_c0_c4' @tap.stop="getShare">一键分享</button>
					<button class='InviteFriends_fd1_0_c0_c5' @tap.stop="savePicture">保存图片到相册</button>
				</view>
			</view>
		</view>
		<!---flex布局flex布局结束-->
		<benben-popup v-model="popupShow1681261522709" :mask="true" mode='bottom'>

			<view class="flex flex-direction align-stretch benben-flex-layout InviteFriends_flex_2">
				<view class='flex align-center justify-between InviteFriends_fd2_0'>
					<view class='flex flex-wrap align-center InviteFriends_fd2_0_c0'>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='InviteFriends_fd2_0_c1_c0'>分享到</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<image class='InviteFriends_fd2_0_c2_c0' :src='STATIC_URL+"26.png"'
							@tap.stop="popupShow1681261522709=false"></image>
					</view>
				</view>
				<view class='flex align-center justify-between InviteFriends_fd2_1'>
					<view class='flex flex-direction align-center' @tap.stop="shareWeixin(1)">
						<image class='InviteFriends_fd2_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"27.png"'></image>
						<text class='InviteFriends_fd2_1_c0_c1'>微信好友</text>
					</view>
					<view class='flex flex-direction align-center' @tap.stop="shareWeixin(2)">
						<image class='InviteFriends_fd2_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"28.png"'></image>
						<text class='InviteFriends_fd2_1_c1_c1'>朋友圈</text>
					</view>
				</view>
			</view>
		</benben-popup>
		
		<!-- 生成海报  -->
		<l-painter ref="painter" :css="{ width: '750rpx', height: '1334rpx', backgroundImage: `url(${bgImg})` }"
			custom-style="position: fixed; top: 100%">
			<template v-if="isShowPost">
				<l-painter-view :css="postView">
					<l-painter-image :src="firends.head_img"
						css="width: 80rpx;height: 80rpx;border-radius: 40rpx;margin:70rpx auto 0 auto;" />
					<l-painter-text :text="`${firends.user_nickname}`" :css="TextCss" />
					<l-painter-text :text="`${'邀请码：'+firends.invite_code}`" :css="TextCss2" />
					<l-painter-image :src="firends.qrcode_url"
						css="width: 320rpx;height: 320rpx;border-radius: 0rpx;margin:24rpx auto 0 auto;" />
				</l-painter-view>
			</template>
		</l-painter>


	</view>
</template>
<script>
	import {
		host,
		SERIAL
	} from '@/common/config.js'
	import {
		http
	} from '@/common/api/index.js';
	export default {
		components: {},


		data() {
			return {
				"popupShow1681261522709": false,
				"firends": {},
				"share_bg": "",
				"shareImg": {
					"id": "",
					"path": ""
				},
				"is_navite": true,
				"postUrl": "",
				"postView": {
					width: '600rpx',
					height: '716rpx',
					background: '#fff',
					position: 'relative',
					border: '0 solid #fff',
					borderRadius: '15rpx',
					margin: '310rpx 75rpx 0 75rpx'
				},
				"TextCss": {
					// 设置居中对齐
					textAlign: 'center',
					fontSize: '28rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#333333',
					letterSpacing: '16rpx',
					display: 'block',
					width: '620rpx',
					margin: '24rpx 0rpx 24rpx 0rpx',
					lineClamp: 1,
				},
				"TextCss2": {
					// 设置居中对齐
					textAlign: 'center',
					fontSize: '24rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#333333',
					letterSpacing: '16rpx',
					display: 'block',
					width: '620rpx',
					margin: '0rpx 0rpx 12rpx 0rpx',
					lineClamp: 1,
				},
				"bgImg": "/static/images/23.png",
				"isShowPost": true,
				"isShow": true,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getFriends();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getFriends() {
				this.$api.post(global.apiUrls.post64368d3fa2fc7, {

				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.firends = res.data.data;
						setTimeout(() => {
							this.shareNow();
						}, 200)
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			//立即生成海报
			shareNow() {
				// this.isShowPost = true;
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: 'png',
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: res => {
						console.log(res.tempFilePath);
						this.postUrl = res.tempFilePath;
						// #ifdef H5
						if (this.postUrl) {
							this.$api.post(global.apiUrls.post6444ded1f2aa8, {
								base64_str: this.postUrl
							}).then(res => {
								console.log(res);
								this.isShow = false;
								if (res.data.code == 1) {
									this.shareImg.path = res.data.data.path;
								} else {
									this.$message.info(res.data.msg);
								}
							})
						}
						// #endif
						// #ifdef APP-PLUS
						let _this = this;
						uni.uploadFile({
							url: host + '/api' + global.apiUrls.UPLOAD_IMAGE_URL,
							filePath: _this.postUrl,
							name: 'file',
							// #ifdef MP
							fileType: "image",
							// #endif
							header: {
								'user-token': global.token || ''
							},
							formData: {
								'module': '',
								'dir': ''
							},
							success: res => {
								console.log(res);
								_this.isShow = false;
								let data = JSON.parse(res.data);
								if (data.code == 1) {
									_this.shareImg = data.data[0]
								} else {
									uni.showToast({
										title: '获取分享图片失败，请重试',
										icon: 'none'
									})
								}
							},
							fail: err => {
								_this.isShow = false;
							},
							complete: () => {
							}
						});
						// #endif
					}
				});
			},
			getShare() {
				this.popupShow1681261522709 = true;
			},
			
			shareWeixin(type) {
				let _this = this;
				if (type == 1) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						href: "",
						title: '空调云台',
						summary: "空调云台",
						imageUrl: _this.shareImg.path,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 2,
						href: "",
						title: '空调云台',
						summary: "空调云台",
						imageUrl: _this.shareImg.path,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				_this.popupShow1681261522709 = false;
			},
			
			savePicture() {
				let _this = this;
				if (global.platform == 'ios') {
					uni.showLoading({
						title: '保存中'
					})
					if (_this.postUrl) {
						uni.saveImageToPhotosAlbum({
							filePath: _this.postUrl,
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
							},
							error: function() {
								uni.showToast({
									title: '图片保存失败',
									icon: 'none'
								})
							},
							complete: function() {
								uni.hideLoading();
							}
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '获取分享图片失败，请重试',
							icon: 'none'
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '访问您的存储权限，使用存储图片到相册功能，用于保存图片，是否允许？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.showLoading({
									title: '保存中'
								})
								if (_this.postUrl) {
									uni.saveImageToPhotosAlbum({
										filePath: _this.postUrl,
										success: function() {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none'
											})
										},
										error: function() {
											uni.showToast({
												title: '图片保存失败',
												icon: 'none'
											})
										},
										complete: function() {
											uni.hideLoading();
										}
									});
								} else {
									uni.hideLoading();
									uni.showToast({
										title: '获取分享图片失败，请重试',
										icon: 'none'
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})
				}
				
				
				
				return;
				
				
				
				
				let base64 = this.postUrl;
				//#ifdef APP-PLUS
				const bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64, function() {
					const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
					console.log('saveHeadImgFile', url)
					bitmap.save(url, {
						overwrite: true, // 是否覆盖
						// quality: 'quality'  // 图片清晰度
					}, (i) => {
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								bitmap.clear()
							}
						});
					}, (e) => {
						uni.hideLoading();
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						bitmap.clear()
					});
				}, (e) => {
					uni.hideLoading();
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					})
					bitmap.clear()
				});
				//#endif
			},
			creates(options) {
				// console.log(options);
				if (!this.share_bg) {
					this.share_bg = options.url;
				}
				this.is_navite = true;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: url(~@/static/images/23.png) no-repeat, #F8F8F8;
		background-size: 100% 100% !important;
	}

	.InviteFriends_flex_0 {
		background: url(~@/static/images/23.png) no-repeat, #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.InviteFriends_fd0_0_c2 {
		width: 150rpx;
	}

	.InviteFriends_fd0_0_c0_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 36rpx;
	}

	.InviteFriends_fd0_0_c0 {
		width: 150rpx;
	}

	.InviteFriends_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.InviteFriends_flex_1 {
		padding: 182rpx 39rpx 0rpx 39rpx;
	}

	.InviteFriends_fd1_0_c0_c5 {
		border: 1px solid rgba(65, 134, 255, 1);
		background: rgba(255, 255, 255, 1);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #4186FF;
		width: 480rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 500;
		margin: 32rpx 0rpx 40rpx 0rpx;
	}

	.InviteFriends_fd1_0_c0_c4 {
		background: #4781f5;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		width: 480rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 500;
		margin: 83rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd1_0_c0_c3 {
		width: 320rpx;
		height: 320rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 36rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd1_0_c0_c2_c1 {
		color: #333333;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 33rpx;
	}

	.InviteFriends_fd1_0_c0_c2_c0 {
		color: #333333;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 33rpx;
	}

	.InviteFriends_fd1_0_c0_c1 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		margin: 16rpx 0rpx 24rpx 0rpx;
	}

	.InviteFriends_fd1_0_c0_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
	}

	.InviteFriends_fd1_0_c0 {
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		padding-top: 16rpx;
	}

	.InviteFriends_fd1_0 {
		padding: 39rpx 39rpx 39rpx 39rpx;
	}

	.InviteFriends_flex_2 {
		background: #fff;
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 40rpx 0rpx 58rpx 0rpx;
	}

	.InviteFriends_fd2_1_c1_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 16rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd2_1_c1_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd2_1_c0_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 16rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd2_1_c0_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd2_1 {
		margin: 48rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 147rpx 0rpx 147rpx;
	}

	.InviteFriends_fd2_0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.InviteFriends_fd2_0_c1_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 45rpx;
		margin: 0rpx 20rpx 0rpx 20rpx;
	}

	.InviteFriends_fd2_0_c0 {
		width: 40rpx;
		height: 40rpx;
	}

	.InviteFriends_fd2_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>